<nav aria-label="Page navigation" class="my-3">
  <ul class="pagination justify-content-center mb-0">
    {% if data.first %}
      <li class="page-item">
        <a class="page-link" href="{{ data.first }}" aria-label="Go to first page">First</a>
      </li>
    {% else %}
      <li class="page-item disabled">
        <a class="page-link" href="#" aria-label="Go to first page">First</a>
      </li>
    {% endif %}
    {% if data.previous %}
      <li class="page-item">
        <a class="page-link" href="{{ data.previous }}" aria-label="Go to previous page"><span aria-hidden="true">&laquo;</span></a>
      </li>
    {% else %}
      <li class="page-item disabled">
        <a class="page-link" href="#" aria-label="Go to previous page"><span aria-hidden="true">&laquo;</span></a>
      </li>
    {% endif %}
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">{{ current_page_results }} of {{ data.count }}</a>
    </li>
    {% if data.next %}
      <li class="page-item">
        <a class="page-link" href="{{ data.next }}" aria-label="Go to next page"><span aria-hidden="true">&raquo;</span></a>
      </li>
    {% else %}
      <li class="page-item disabled">
        <a class="page-link" href="#" aria-label="Go to next page"><span aria-hidden="true">&raquo;</span></a>
      </li>
    {% endif %}
    {% if data.last %}
      <li class="page-item">
        <a class="page-link" href="{{ data.last }}" aria-label="Go to last page">Last</a>
      </li>
    {% else %}
      <li class="page-item disabled">
        <a class="page-link" href="#" aria-label="Go to last page">Last</a>
      </li>
    {% endif %}
  </ul>
</nav>